<script setup>

const logOut = () => {
  window.location="/login"
}

const toPassword = () => {
  window.location = "/dashboard/password"
}

var i=0;
function myDate(){
    var now=new Date();
    var year=now.getFullYear();
    var month=now.getMonth()+1;
    var day=now.getDate();
    var hours=now.getHours();
    hours = hours < 10 ? '0' + hours : hours
    var minutes=now.getMinutes();
    minutes = minutes < 10 ? '0' + minutes : minutes
    var seconds=now.getSeconds();
    seconds = seconds < 10 ? '0' + seconds : seconds

    document.getElementById("date").innerHTML=year+"年"+month+"月"+day+"日"+hours+"："+minutes+"："+seconds;
}
setInterval(myDate,1000);
</script>

<template>
  <div class="dashboard-container">
    <el-container>
      <el-header class="header">
        <span class="title">智能决策CRM系统</span>
        <span id="date" style="line-height: 360%;"></span>
        <span class="right_tool">
          <el-button type="info" @click="toPassword()">
            <el-icon><Edit/></el-icon> 修改密码
          </el-button>
          <el-button type="danger" @click="logOut()">
            <el-icon><SwitchButton/></el-icon> 退出登录
          </el-button>
        </span>
      </el-header>
      <el-container>
        <el-aside class="aside">
          <el-scrollbar style="background-color: #cfd9df;">
            <el-menu router>

              <el-menu-item index="/dashboard/index">
                <el-icon>
                  <Promotion/>
                </el-icon>
                首页
              </el-menu-item>

              <el-sub-menu index=0>
                <template #title>
                  <el-icon>
                    <Menu/>
                  </el-icon>
                  营销管理
                </template>
                <el-menu-item index="/dashboard/sale_chance">营销机会管理</el-menu-item>
                <el-menu-item index="/dashboard/order_details">订单详细信息</el-menu-item>
                <el-menu-item index="/dashboard/cus_dev_plan">客户开发计划</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index=1>
                <template #title>
                  <el-icon>
                    <UserFilled/>
                  </el-icon>
                  客户管理
                </template>
                <el-menu-item index="/dashboard/customer">客户信息管理</el-menu-item>
                <el-menu-item index="/dashboard/customer_loss">客户流失管理</el-menu-item>
                <el-menu-item index="/dashboard/customer_reprieve">客户暂缓管理</el-menu-item>
                <el-menu-item index="/dashboard/customer_order">客户订单管理</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index=2>
                <template #title>
                  <el-icon>
                    <HelpFilled/>
                  </el-icon>
                  服务管理
                </template>
                <el-menu-item index="/dashboard/serve_new">服务创建</el-menu-item>
                <el-menu-item index="/dashboard/serve_assign">服务分配</el-menu-item>
                <el-menu-item index="/dashboard/serve_process">服务处理</el-menu-item>
                <el-menu-item index="/dashboard/serve_feedback">服务反馈</el-menu-item>
                <el-menu-item index="/dashboard/serve_file">服务归档</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index=3>
                <template #title>
                  <el-icon>
                    <Histogram/>
                  </el-icon>
                  统计报表
                </template>
                <el-menu-item index="/dashboard/report_contribute">客户贡献统计</el-menu-item>
                <el-menu-item index="/dashboard/report_constitute">客户构成统计</el-menu-item>
                <el-menu-item index="/dashboard/report_serve">客户服务统计</el-menu-item>
                <el-menu-item index="/dashboard/report_loss">客户流失统计</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index=4>
                <template #title>
                  <el-icon>
                    <Tools/>
                  </el-icon>
                  系统设置
                </template>
                <el-menu-item index="/dashboard/data_dic">字典管理</el-menu-item>
                <el-menu-item index="/dashboard/user">用户管理</el-menu-item>
                <el-menu-item index="/dashboard/role">角色管理</el-menu-item>
                <el-menu-item index="/dashboard/module">模块管理</el-menu-item>
              </el-sub-menu>

              <el-sub-menu index=5>
                <template #title>
                  <el-icon>
                    <Edit/>
                  </el-icon>
                  测试
                </template>
                <el-menu-item index="/dashboard/test1">测试1</el-menu-item>
                <el-menu-item index="/dashboard/test2">测试2</el-menu-item>
              </el-sub-menu>

            </el-menu>
          </el-scrollbar>
        </el-aside>


        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>

    </el-container>

  </div>
</template>


<style scoped>
.dashboard-container {
  padding: 20px;
}

.header {
  background-image: linear-gradient(
      to right,
      #cfd9df,
      #ebedee
  );
  border-radius: 5px;
}

.title {
  color: Black;
  font-size: 30px;
  line-height: 60px;
  font-weight: bolder;
}

.title {
  font-family: YouYuan, serif;
}

.right_tool {
  float: right;
  line-height: 60px;
}

.header {
  display: flex;
  justify-content: space-between;
}

a {
  color: white;
  text-decoration: none;
}

.aside {
  width: 180px;
  border-right: 1px solid #ccc;
  height: 84vh;
}

.main {
  height: 84vh;
}
</style>

